<template>
  <div class="content" v-loading="loading">
    <div class="inputLine flexBet">
      <el-input
        style="width: 320px"
        v-model="queryParams.teacherNameOrNum"
        placeholder="请输入教师姓名/工号"
        clearable
        @keyup.enter.native="getList"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <div class="flex">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList"
        >搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetSearch"
        >重置
        </el-button>
      </div>
    </div>
    <div class="box" v-if="userList.length > 0">
      <div class="item rela" v-for="(item, index) in userList" :key="index">
        <div
          class="stop absolute"
          v-if="item.teacherStatus == 1 || item.teacherStatus == 2"
        >
          {{ item.teacherStatus == 1 ? '已停用' : '已删除' }}
        </div>
        <!-- 名字行 -->
        <div class="flexColCenter nameLine">
          <div class="nameLine_color">{{ item.teacherName.slice(0, 1) }}</div>
          <div class="nameLine_name">{{ item.teacherName }}</div>
          <img
            v-if="item.leaderFlag == 1"
            class="nameLine_img"
            src="@/assets/images/disciplineGroup/leadericon.png"
            alt=""
          />
        </div>
        <!-- 学号 -->
        <div class="flexColCenter numLine">
          <img
            class="numLine_img"
            src="@/assets/images/disciplineGroup/num.png"
            alt=""
          />
          <div class="numLine_num">{{ item.teacherNum }}</div>
        </div>
        <!-- 电话 -->
        <div class="flexColCenter callLine">
          <img
            class="callLine_img"
            src="@/assets/images/disciplineGroup/call.png"
            alt=""
          />
          <div class="callLine_num">{{ item.phoneNumber | regPhone }}</div>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂无成员"></el-empty>
    <!-- <div class="pageLine flexEnd flexColCenter">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="100"
        :page-size="10"
        :current-page="1"
      />
    </div> -->
  </div>
</template>

<script>
import { branchDisciplineTeacherList } from '@/api/disciplineGroup/disciplineGroup'

export default {
  props: {
    activeIndex: [Number, String]
  },
  data() {
    return {
      queryParams: {
        courseName: ''
      },
      loading: false,
      userList: []
    }
  },
  watch: {
    activeIndex: {
      handler(val) {
        console.log('activeIndex', val)
        if (val == 3) {
          this.getList()
        }
      },
      immediate: true
    }
  },
  methods: {
    async getList() {
      console.log('getList')
      this.loading = true
      try {
        const res = await branchDisciplineTeacherList({
          disciplineGroupId: this.$route.query.disciplineGroupId,
          teacherNameOrNum: this.queryParams.teacherNameOrNum
        })
        if (res.code == 200) {
          this.userList = res.data
        }
      } finally {
        this.loading = false
      }
    },
    resetSearch() {
      this.queryParams = {
        courseName: ''
      }
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  height: calc(100vh - 310px + 80px);
  display: flex;
  box-sizing: border-box;
  flex-direction: column;

  .inputLine {
    padding: 24px 34px 0 42px;
  }

  .box {
    align-content: flex-start !important; /* 避免行间多余空白 */
    margin: 24px 0 0 0;
    padding: 0 0 0 42px;
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: auto;
  }

  .pageLine {
    padding: 0 64px 0 0;
    height: 60px;
  }

  .item {
    margin: 0 24px 24px 0;
    width: 200px;
    height: 108px;
    border-radius: 12px;
    background: url("../../../assets/images/disciplineGroup/cardbg.png");
    background-size: 200px 108px;
    box-sizing: border-box;
    padding: 11px 0;

    .stop {
      width: 200px;
      height: 108px;
      background: rgba($color: #000000, $alpha: 0.4);
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      line-height: 108px;
      text-align: center;
      font-style: normal;
      border-radius: 12px;

      top: 0;
      left: 0;
    }

    .nameLine {
      padding-left: 16px;
      height: 40px;

      .nameLine_color {
        width: 40px;
        height: 40px;
        background: #4e8dff;
        border-radius: 8px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 600;
        font-size: 22px;
        color: #ffffff;
        line-height: 40px;
        text-align: center;
        font-style: normal;
      }

      .nameLine_name {
        margin-left: 10px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 600;
        font-size: 18px;
        color: #333333;
        line-height: 18px;
        text-align: left;
        font-style: normal;
      }

      .nameLine_img {
        width: 34px;
        height: 14px;
        margin-left: 10px;
      }
    }

    .numLine {
      padding: 8px 0 0 28px;
      height: 20px;

      .numLine_img {
        width: 16px;
        height: 16px;
      }

      .numLine_num {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        margin-left: 26px;
      }
    }

    .callLine {
      padding: 2px 0 0 28px;

      .callLine_img {
        width: 16px;
        height: 16px;
      }

      .callLine_num {
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        margin-left: 26px;
      }
    }
  }
}
</style>
